<template>
	<d2-container>
		<!-- 页头部分 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="100px" style="height:auto">
				<!-- 说明 -->
				<!-- 一行用一个row -->
				<!-- 每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<el-row>
					<el-col :span="6">
						<el-form-item label="合作伙伴名称" prop="partnerName">
							<el-input type="text" v-model="queryForm.partnerName" placeholder="请输入合作伙伴名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="合作伙伴编码" prop="partnerCode">
							<el-input type="text" v-model="queryForm.partnerCode" placeholder="请输入合作伙伴编码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="消费券商品" prop="productCouponName">
							<el-input type="text" v-model="queryForm.productCouponName" placeholder="请输入消费券商品"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="消费券面额" prop="couponAmount">
							<el-input type="text" v-model="queryForm.couponAmount" placeholder="请输入消费券面额"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<el-form-item label="审核状态" prop="status">
							<el-select v-model="queryForm.status" placeholder="请选择审核状态" style="width:100%">
								<el-option label="全部" value=""></el-option>
								<el-option label="未提交" value="0"></el-option>
								<el-option label="审核中" value="1"></el-option>
								<el-option label="审核通过" value="2"></el-option>
								<el-option label="审核未通过" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="交付状态" prop="deliverStatus">
							<el-select v-model="queryForm.deliverStatus" placeholder="请选择交付状态" style="width:100%">
								<el-option label="全部" value=""></el-option>
								<el-option label="未交付" value="0"></el-option>
								<el-option label="已交付" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="创建时间" prop="time">
							<el-date-picker
									v-model="time"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"
									 style="width:100%"
								></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<!-- 主体部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="addPage()">新增</el-button>
			</div>

			<!-- 表格 -->
			<!-- 表格统一用 带边框、条纹间隔 的样式 -->
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50"></el-table-column>
				<el-table-column prop="partnerName" label="合作伙伴名称"></el-table-column>
				<el-table-column prop="partnerCode" label="合作伙伴编码"></el-table-column>
				<el-table-column prop="productCouponName" label="消费券商品"></el-table-column>
				<el-table-column prop="couponAmount" label="消费券面额(元)"></el-table-column>
                <el-table-column prop="grantNum" label="发放数量(张)"></el-table-column>
				<el-table-column prop="status" label="审核状态" width="103">
					<template slot-scope="scope">
                        <el-tag v-if="scope.row.status==0">未提交</el-tag>
                        <el-tag v-if="scope.row.status==1">审核中</el-tag>
						<el-tag v-if="scope.row.status==2">审核通过</el-tag>
						<el-tag v-if="scope.row.status==3">审核未通过</el-tag>
                    </template>
				</el-table-column>
				<el-table-column prop="auditTime" label="审核时间" width="150" :formatter="forDateAudit"></el-table-column>
				<el-table-column prop="auditor" label="审核人" width="100"></el-table-column>
				<el-table-column prop="deliverStatus" label="交付状态" width="100">
					<template slot-scope="scope">
                        <el-tag v-if="scope.row.deliverStatus==0">未交付</el-tag>
                        <el-tag v-if="scope.row.deliverStatus==1">已交付</el-tag>
                    </template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="150" :formatter="forDateCreate"></el-table-column>
				<el-table-column label="操作" fixed="right" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click.native.prevent="detailPage(scope.row.id)">详情</el-button>
						<el-button v-if="scope.row.status==0 || scope.row.status==3" type="success" plain size="small" @click.native.prevent="doSubmit(scope.row)">提交</el-button>
						<el-button v-if="scope.row.status==0 || scope.row.status==3" type="warning" plain size="small" @click.native.prevent="updatePage(scope.row.id)">编辑</el-button>
						<el-button v-if="scope.row.status==0 || scope.row.status==3" type="danger"  plain size="small" @click.native.prevent="deleteRow(scope.row)">删除</el-button>
						<el-button v-if="scope.row.status==1 && scope.row.deliverStatus==0" type="success" plain size="small" @click.native.prevent="detailPage(scope.row.id)">去审核</el-button>
						<el-button v-if="scope.row.status==2 && scope.row.deliverStatus==0" type="success" plain size="small" @click.native.prevent="doConfirmDeliver(scope.row)">确认交付</el-button>
                    </template>
				</el-table-column>
			</el-table>
		</template>

		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>

	</d2-container>
</template>

<script>
import { 
findProductCouponCpListByPage, 
submitProductCouponCp,
confirmDeliver, 
deleteProductCouponCp
 } from '@api/coupon/productCouponCp'
import dayjs from 'dayjs'
export default {
  name: 'coupon-productCouponCpList',
  data () {
    return {
      queryForm: {
        partnerName: '',
		partnerCode: '',
		productCouponName: '',
		couponAmount: '',
        status: '',
		deliverStatus: '',
        createTimeBegin: '',
        createTimeEnd: ''
      },
      time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
	  tableData: [],
	  currentPage: 1,
	  pageSize: 10,
	  total: 0,
	  multipleSelection: []
	}
  },
  mounted () {
    this.fetchData()
  },
  methods: {
	resetPage () {
        this.currentPage = 1,
        this.pageSize = 10,
        this.total = 0
    },
	submitForm (formName) {
		this.resetPage()
        this.fetchData()
	},
	resetForm (formName) {
		this.$refs[formName].resetFields()
        this.time = []
        this.resetPage()
        this.fetchData()
	},
	fetchData () {
      this.loading = true
      this.queryForm.createTimeBegin = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.queryForm.createTimeEnd = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
      findProductCouponCpListByPage({
        partnerName: this.queryForm.partnerName,
        partnerCode: this.queryForm.partnerCode,
		productCouponName: this.queryForm.productCouponName,
        couponAmount: this.queryForm.couponAmount,
        status: this.queryForm.status,
		deliverStatus: this.queryForm.deliverStatus,
        startTime: this.queryForm.createTimeBegin,
        startEnd: this.queryForm.createTimeEnd,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
	handleSizeChange (val) {
	    this.pageSize = val
		this.fetchData()
	},
	handleCurrentChange (val) {
	    this.currentPage = val
		this.fetchData()
	},
	forDateCreate (row, column) {
        return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
	forDateAudit (row, column) {
		return row.auditTime == null ? '' : dayjs(row.auditTime).format('YYYY-MM-DD HH:mm:ss')
	},
	// 提交
	doSubmit (row) {
	  this.$confirm('确认提交' + row.partnerName + '？').then(_ => {
        this.loading = true
        submitProductCouponCp({
          id: row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.fetchData()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
	},
	// 删除
	deleteRow (row) {
	  this.$confirm('确认删除' + row.partnerName + '？').then(_ => {
        this.loading = true
        deleteProductCouponCp({
          id: row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.fetchData()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
	},
	// 确认交付
	doConfirmDeliver (row) {
	  this.$confirm('当前消费券数量是否已全部交付给合作伙伴【' + row.partnerName + '】？').then(_ => {
        this.loading = true
        confirmDeliver({
          id: row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.fetchData()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
	},
	// 新增
	addPage () {
	  // 跳转到新增页面
      this.$router.push({
        path: 'coupon/productCouponCpAdd',
        name: 'coupon-productCouponCpAdd',
        params: ''
      })
	},
	// 编辑
	updatePage (id) {
	  // 跳转到编辑页面
	  sessionStorage.setItem('productCouponCpUpdateId', id)
      this.$router.push({
        path: 'coupon/productCouponCpUpdate',
        name: 'coupon-productCouponCpUpdate',
        params: ''
      })
	},
	// 详情
	detailPage (id) {
	  // 跳转到详情页面
	  sessionStorage.setItem('productCouponCpDetailId', id)
      this.$router.push({
        path: 'coupon/productCouponCpDetail',
        name: 'coupon-productCouponCpDetail',
        params: ''
      })
	}
  }
}
</script>

<style lang="scss" scoped>
// 样式请务必加scoped
.el-card-logo {
  height: 256px !important;
  width: 256px !important;
}
.el-card-logo .el-card__body {
  height: 256px !important;
  width: 256px !important;
  padding: 0px !important;
}
</style>
